<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<p>{{VueMsg}}</p>
	<parent-component>
		
	</parent-component>
</div>
<script>
	//1. 一个父元素 包含 一个子元素
	//2. 在这个父元素自定义一个自定义事件接受子元素传来的信息
	//3. 在子元素自定义一个自定义事件用来向父元素传信息
	Vue.component('parent-component',{
		data : function(){
			return {
				fromSonMsg : '',
			};
		
		},
		methods : {//自定义事件用来接受子组件传过来的sonMsg
			recvFromSonMsg : function(sonMsg){
				console.log('接收到了从子组件传过来的信息 ' + sonMsg);
				this.fromSonMsg = sonMsg;
			}
		},
		template : `
			<div>
				<div>
					<h1>这是父组件</h1>
					<p>这是从子组件接收到的数据 : {{fromSonMsg}}</p>
				</div>
				<hr />
				<child-component @currentEvent='recvFromSonMsg'>
				</child-component>
			</div>
		`,
	});
	Vue.component('child-component',{
		data : function(){
			return {
				sonMsg : '你好啊',
			};
		},
		template : `
			<div>
				<h1>这是子组件</h1>
				<button @click='sendToFather'>sendToFather</button>
			</div>
		`,
		methods : {
			sendToFather : function(){
				this.$emit('currentEvent',this.sonMsg);//将触发currentEvent自定义事件，然后把this.sonMsg当作参数传给currentEvent
			}
		}
	});

	var vm = new Vue({
		el : '#root',
		data : {
			VueMsg : 'Hello VueJs !',
		},
	})
</script>	
</body>
</html>